<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-delete" style="margin-right:10px" @click="handleCloseAll">批量查封</el-button>
        <el-input v-model="listQuery.name" placeholder="商品名" style="width:90px" />
        <el-input v-model="listQuery.category" placeholder="所属类别" style="width:120px" />
        <el-button type="primary" icon="el-icon-search" :disabled="isDisable" @click="search">搜索</el-button>
      </div>
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          element-loading-text="拼命加载中"
          border
          fit
          highlight-current-row
          style="width: 100%"
          :row-style="{height:'0px'}"
          :cell-style="{padding:'0px'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="45"
            align="center"
          />
          <el-table-column
            prop="name"
            label="商品名"
          />
          <el-table-column
            prop="price"
            label="商品价格"
          />
          <el-table-column
            prop="count"
            label="销量"
          />
          <el-table-column
            prop="description"
            label="商品描述"
          />
          <el-table-column
            prop="category"
            label="所属类别"
          />
          <el-table-column label="图片" width="100px" height="100px" aligin="center">
            <template slot-scope="scope">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="scope.row.icon?scope.row.icon:''" class="image" :onerror="defaultAvatar">
              </el-card>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200px">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-close" class="warnning" @click="close(scope.row)">查封</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            v-if="total"
            background
            :current-page="listQuery.pn"
            :page-sizes="[5,10, 20, 25, 30]"
            :page-size="listQuery.ps"
            layout="total, slot, sizes, prev, pager, next, jumper"
            :total="totalNumber"
            @current-change="pageChange"
            @size-change="sizeChange"
          />
        </div>
      </div>

      <!-- 查封提示框 -->
      <el-dialog title="提示" :visible.sync="closeVisible" width="300px" center>
        <div class="del-dialog-cnt">查封不可恢复，是否确定查封？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelClose">取 消</el-button>
          <el-button type="primary" @click="closeRow">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 批量删除提示框 -->
      <el-dialog title="提示" :visible.sync="closeAllVisible" width="300px" center>
        <div class="del-dialog-cnt">是否确定批量查封？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelClose">取 消</el-button>
          <el-button type="primary" @click="confirmCloseAll">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 批量删除第二次提示框 -->
      <el-dialog title="提示" :visible.sync="confirmCloseAllVisible" width="320px" center>
        <div class="del-dialog-cnt">批量查封不可恢复，是否确定查封？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelClose">取 消</el-button>
          <el-button type="primary" @click="closeAll">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAllGoods, closeGoods } from '@/api/users/goods'
import qs from 'qs'
export default {
  name: 'Basetable',
  data() {
    return {
      multipleSelection: [],
      closeAllVisible: false, // 是否弹出批量删除确认框
      confirmCloseAllVisible: false,
      isDisable: false, // 是否禁用搜索按钮
      closeVisible: false, // 是否弹出查封用户账号的
      shopName: '田壮壮的小披萨店',
      tableData: [],
      // 查询条件：
      listQuery: {
        pn: 1, // 当前页数 int
        ps: 5, // 每页大小 int
        name: '',
        category: '',
        seller_id: undefined
        // sort: '+id'
      },
      total: undefined, // 总页数
      totalNumber: undefined, // 总条数
      // 查封参数：
      closeList: {
        list: []
      }
    }
  },
  computed: {
    defaultAvatar() {
      return 'this.src="' + require('../../../assets/img/goods.png') + '"'
    }
  },
  created() {
    this.listLoading = false
    this.getList()
    // console.log('checkPhone--->' + this.checkPhone('123fvsd'))
  },
  methods: {
    // 分页：
    pageChange(num) {
      this.listQuery.pn = num
      this.getList()
    },
    sizeChange(num) {
      this.listQuery.ps = num
      // this.paginationData.currentPage == 1 && this.requestListData()
      // 每一页改变当前显示条数需要重新请求数据
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getList() {
      // 获取跳转时传来的参数seller_id：
      this.listQuery.seller_id = parseInt(this.$route.query.id)

      this.listLoading = true
      this.tableData = []
      getAllGoods(qs.stringify(this.listQuery)).then(res => {
        this.total = res.GoodsList.totalPage
        this.totalNumber = res.GoodsList.totalCount
        if (res.GoodsList.list !== null && res.GoodsList.list.length !== 0) {
          this.tableData = res.GoodsList.list
          this.listLoading = false
        } else {
          this.tableData = []
          this.listLoading = false
        }
      }).catch(
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      )
    },

    search() {
      this.isDisable = true
      this.tableData = []
      this.getList()
      setTimeout(() => {
        this.isDisable = false// 点击一次时隔两秒后才能再次点击
      }, 2000)
    },
    close(row) {
      this.closeList.list.push(row.id)
      this.closeVisible = true
    },
    closeRow() {
      // 把closeList里面要查封的商品ID传给后端
      var params = new URLSearchParams()
      params.append('closeList', this.closeList.list)
      closeGoods(params).then(response => {
        if (response.code === 200) {
          this.$message.success('查封成功')
          this.closeList.list = []
          this.getList()
        } else {
          this.$message.warning('查封失败')
        }
        this.closeList.list = []
      })
      this.closeVisible = false
      this.closeAllVisible = false
      this.confirmCloseAllVisible = false
    },
    cancelClose() {
      this.closeVisible = false
      this.closeAllVisible = false
      this.confirmCloseAllVisible = false
      // 清空选项，项目中：请求接口后，重新请求数据渲染页面的时候，使用此方式，清空选中勾选状态。
      this.multipleSelection = []
    },
    handleCloseAll() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请先选择待查封的商品')
      } else {
        this.closeAllVisible = true
      }
    },
    confirmCloseAll() {
      this.closeAllVisible = false
      this.confirmCloseAllVisible = true
    },
    closeAll() {
      const length = this.multipleSelection.length
      for (let i = 0; i < length; i++) {
        this.closeList.list.push(this.multipleSelection[i].id)
      }
      this.closeRow()
      this.multipleSelection = []
    }
  }
}
</script>
<style scoped>
  .image {
    /* height: 70px; */
    width: 100%;
    display: block;
  }
.page{
  margin-top: 1%;
  margin-bottom: 2%;
  float: right;
}
.container{
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
}
    .handle-box {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 120px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .green{
        color: #228B22;
    }
    .warnning{
        color: #bd5a09;
    }
    .mr10{
        margin-right: 10px;
    }
</style>
